<template>
    <section>
        <el-row slot="header" >
           <div style="text-align: right" >
               <el-button type="text" @click="goBack">返回</el-button>
           </div>
            <el-row :gutter="24" >
                <el-col :span="5" >
                    <el-card shadow="always">
                        <span style="font-size: 18px;font-weight: 600" >
                            总收入: {{statistic.incomes}} 元
                        </span>
                    </el-card>
                </el-col>
                <el-col :span="5" >
                    <el-card shadow="always">
                       <span style="font-size: 18px;font-weight: 600" >
                        总开桌时长: {{statistic.times}} 小时
                       </span>
                    </el-card>
                </el-col>
            </el-row>
            <div style="height: 10px;width: 100%" >

            </div>
        </el-row>
        <!--工具条-->
        <el-row :gutter="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="logModel">
                <el-form-item label="时间" prop="createTime" >
                    <el-date-picker
                            v-model="logModel.createTime"
                            type="datetimerange"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator=" 至 "
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="searchClick">查询</el-button>
                </el-form-item>
            </el-form>
        </el-row>

        <el-row :gutter="24">
            <el-table :data="tableData"
                      highlight-current-row
                      v-loading="listLoading"
                      style="width: 100%;">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column min-width="120" label="价格" prop="price" ></el-table-column>
                <el-table-column min-width="120" label="合计" prop="amount" ></el-table-column>
                <el-table-column min-width="120" label="实际收入" prop="income" ></el-table-column>
                <el-table-column min-width="120" label="开桌时长(分钟)" prop="totalTime" ></el-table-column>
                <el-table-column min-width="120" label="开桌人(玩的人)" prop="player" show-tooltip-when-overflow ></el-table-column>
                <el-table-column min-width="120" label="开桌员工" prop="assistant" show-tooltip-when-overflow ></el-table-column>
                <el-table-column min-width="160" label="开始时间" prop="createTime" show-tooltip-when-overflow ></el-table-column>
                <el-table-column min-width="160" label="结束时间" prop="endTime" show-tooltip-when-overflow ></el-table-column>
                <el-table-column min-width="120" label="状态" prop="status" >
                    <el-table-column min-width="120" label="当前状态" prop="status" >
                        <template slot-scope="scope">
                            {{scope.row.status | toCase(static.status,'dataId', 'dataName')}}
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>


            <el-pagination
                           @current-change="handleCurrentChange"
                           layout="total,prev, pager, next,jumper"
                           :page-size="page.size"
                           :total="page.total"
                           style="float:right;">
            </el-pagination>

        </el-row>

    </section>
</template>

<script>
    import {getGameLogListPage,dataStatistic} from '../../api/api'
    export default {
        name: "GameLog",
        data(){
            return {
                logModel:{
                    deskId:null,
                    createTime:[]
                },
                page:{
                    current:1,
                    total:0,
                    size:10
                },
                listLoading:false,
                tableData:[],
                static:{
                    status:[
                        {
                            dataId:'1',
                            dataName:'未开球'
                        },
                        {
                            dataId:'2',
                            dataName:'运行中'
                        },
                        {
                            dataId:'3',
                            dataName:'已结束'
                        }
                    ]
                },
                statistic:{
                    times:0,
                    incomes:0
                }
            }
        },
        methods:{
            goBack(){
                this.$router.go(-1);
            },
            handleCurrentChange(val){
                this.page.current = val
                this.search()
            },
            search(){
                let params = {
                    deskId: this.logModel.deskId,
                    current:this.page.current,
                    size:this.page.size,
                    timeBegin:undefined,
                    timeEnd:undefined
                }
                if(this.logModel.createTime != null && this.logModel.createTime.length > 0){
                    params.timeBegin = this.logModel.createTime[0]
                    params.timeEnd = this.logModel.createTime[1]
                }
                getGameLogListPage(params).then(resp => {
                    if(resp.data.code == '200'){
                        this.tableData = resp.data.data.records
                        this.page.total = resp.data.data.total
                    }else{
                        this.$message.error(resp.data.msg)
                    }
                })

                dataStatistic(params).then(resp => {
                    if(resp.data.code == '200'){
                        this.statistic.times = resp.data.data.times?resp.data.data.times:0
                        this.statistic.incomes = resp.data.data.incomes?resp.data.data.incomes:0
                    }else{
                        this.$message.error(resp.data.msg)
                    }
                })

            },
            searchClick(){
                this.page.current = 1
                this.search()
            },
        },
        created() {
            this.logModel.deskId = this.$route.query.deskId
            this.search()
        }
    }
</script>

<style scoped>

</style>